<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 样式列表 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists -->

    <!-- 项目符号位置 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists#%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7%E4%BD%8D%E7%BD%AE -->
    <!-- list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。 -->
    <!-- list-style-position -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-position -->
    <ol style="list-style-position: inside;">list-style-position: inside
        <li>Hello</li>
        <li>World</li>
    </ol>
    <ol style="list-style-position: outside;">list-style-position: outside
        <li>Hello</li>
        <li>World</li>
    </ol>

    <hr>


    <!-- 符号样式 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists#%E7%AC%A6%E5%8F%B7%E6%A0%B7%E5%BC%8F -->
    <!-- list-style-type  属性允许你设置项目符号点的类型 -->
    <!-- list-style-type -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type -->
    <!-- CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。 -->
    <ol style="list-style-type: armenian;">list-style-type: armenian
        <li>Hello</li>
        <li>World</li>
    </ol>
    <ol style="list-style-type: lower-latin;">list-style-type: lower-latin
        <li>Hello</li>
        <li>World</li>
    </ol>

    <hr>



    <!-- 使用自定义的项目符号图片 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7%E5%9B%BE%E7%89%87 -->
    <!-- list-style-image 属性允许对于项目符号使用自定义图片。 -->
    <!-- list-style-image -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-image -->
    <!-- list-style-image 属性用来指定一个能用来作为列表元素标记的图片。 -->
    <ol style="list-style-image: url(ver.ico); background-size: 0.1em;">list-style-image: url(ver.ico);
        <li>Hello</li>
        <li>World</li>
    </ol>
    <ol style="list-style-image: url(MAIL.ICO); background-size: 0.1em;">list-style-image: url(MAIL.ICO);
        <li>Hello</li>
        <li>World</li>
    </ol>

    <hr>


    <!-- list-style 速记 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists#list-style_%E9%80%9F%E8%AE%B0 -->
    <!-- 上述提到的三种属性可以用一个单独的速记属性 list-style 来设置 -->
    <!-- list-style -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style -->
    <!-- list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position。 -->
    <ol style="list-style: square url(sync.ico) inside;">list-style
        <li>Hello</li>
        <li>World</li>
    </ol>

</body>

</html>